<{extend name="Public:public0" /}>

<{block name="title"}>API - Vue.js<{/block}>

<{block name="sidebar"}><{include file="Public:sidebar-api" /}><{/block}>

<{block name="content"}> 
<div class="content api with-sidebar ">
<h1>API</h1>
  
<h2 id="全局配置" data-scroll-id="全局配置" tabindex="-1" style="outline: none;">
	<a href="#全局配置" class="headerlink" title="全局配置" data-scroll="">全局配置</a>
</h2>
<p><code>Vue.config</code>  是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性：</p>
<h3 id="silent"><a href="#silent" class="headerlink" title="silent" data-scroll="">silent</a></h3><ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>false</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.config.silent = <span class="literal">true</span></span><br></pre></td></tr></tbody></table></figure>
<p>取消 Vue 所有的日志与警告。</p>
</li>
</ul>
<h3 id="optionMergeStrategies"><a href="#optionMergeStrategies" class="headerlink" title="optionMergeStrategies" data-scroll="">optionMergeStrategies</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: Function }</code></p>
</li>
<li><p><strong>默认值</strong>：<code>{}</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.config.optionMergeStrategies._my_option = <span class="function"><span class="keyword">function</span> (<span class="params">parent, child, vm</span>) </span>{</span><br><span class="line">  <span class="keyword">return</span> child + <span class="number">1</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Profile = Vue.extend({</span><br><span class="line">  _my_option: <span class="number">1</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// Profile.options._my_option = 2</span></span><br></pre></td></tr></tbody></table></figure>
<p>自定义合并策略的选项。</p>
<p>合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数，Vue 实例上下文被作为第三个参数传入。</p>
</li>
<li><p><strong>参考</strong> <a href="../guide/mixins.html#自定义选项混入策略">自定义选项的混入策略</a></p>
</li>
</ul>
<h3 id="devtools"><a href="#devtools" class="headerlink" title="devtools" data-scroll="">devtools</a></h3><ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>true</code> (生产版为 <code>false</code>)</p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 务必在加载 Vue 之后，立即同步设置以下内容</span></span><br><span class="line">Vue.config.devtools = <span class="literal">true</span></span><br></pre></td></tr></tbody></table></figure>
<p>配置是否允许 <a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="noopener">vue-devtools</a> 检查代码。开发版本默认为 <code>true</code>，生产版本默认为 <code>false</code>。生产版本设为 <code>true</code> 可以启用检查。</p>
</li>
</ul>
<h3 id="errorHandler"><a href="#errorHandler" class="headerlink" title="errorHandler" data-scroll="">errorHandler</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>默认值</strong>：<code>undefined</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.config.errorHandler = <span class="function"><span class="keyword">function</span> (<span class="params">err, vm, info</span>) </span>{</span><br><span class="line">  <span class="comment">// handle error</span></span><br><span class="line">  <span class="comment">// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子</span></span><br><span class="line">  <span class="comment">// 只在 2.2.0+ 可用</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。</p>
<blockquote>
<p>从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 <code>undefined</code> 时，被捕获的错误会通过 <code>console.error</code> 输出而避免应用崩溃。</p>
</blockquote>
<blockquote>
<p>从 2.4.0 起这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。</p>
</blockquote>
<blockquote>
<p>错误追踪服务 <a href="https://sentry.io" target="_blank" rel="noopener">Sentry</a> 和 <a href="https://docs.bugsnag.com/platforms/browsers/vue/" target="_blank" rel="noopener">Bugsnag</a> 都通过此选项提供了官方支持。</p>
</blockquote>
</li>
</ul>
<h3 id="warnHandler"><a href="#warnHandler" class="headerlink" title="warnHandler" data-scroll="">warnHandler</a></h3><blockquote>
<p>2.4.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>默认值</strong>：<code>undefined</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.config.warnHandler = <span class="function"><span class="keyword">function</span> (<span class="params">msg, vm, trace</span>) </span>{</span><br><span class="line">  <span class="comment">// `trace` 是组件的继承关系追踪</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。</p>
</li>
</ul>
<h3 id="ignoredElements"><a href="#ignoredElements" class="headerlink" title="ignoredElements" data-scroll="">ignoredElements</a></h3><ul>
<li><p><strong>类型</strong>：<code>Array&lt;string | RegExp&gt;</code></p>
</li>
<li><p><strong>默认值</strong>：<code>[]</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.config.ignoredElements = [</span><br><span class="line">  <span class="string">'my-custom-web-component'</span>,</span><br><span class="line">  <span class="string">'another-web-component'</span>,</span><br><span class="line">  <span class="comment">// 用一个 `RegExp` 忽略所有“ion-”开头的元素</span></span><br><span class="line">  <span class="comment">// 仅在 2.5+ 支持</span></span><br><span class="line">  /^ion-<span class="regexp">/</span></span><br><span class="line"><span class="regexp">]</span></span><br></pre></td></tr></tbody></table></figure>
<p>须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 <code>Unknown custom element</code> 的警告。</p>
</li>
</ul>
<h3 id="keyCodes"><a href="#keyCodes" class="headerlink" title="keyCodes" data-scroll="">keyCodes</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: number | Array&lt;number&gt; }</code></p>
</li>
<li><p><strong>默认值</strong>：<code>{}</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.config.keyCodes = {</span><br><span class="line">  v: <span class="number">86</span>,</span><br><span class="line">  f1: <span class="number">112</span>,</span><br><span class="line">  <span class="comment">// camelCase 不可用</span></span><br><span class="line">  mediaPlayPause: <span class="number">179</span>,</span><br><span class="line">  <span class="comment">// 取而代之的是 kebab-case 且用双引号括起来</span></span><br><span class="line">  <span class="string">"media-play-pause"</span>: <span class="number">179</span>,</span><br><span class="line">  up: [<span class="number">38</span>, <span class="number">87</span>]</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> @<span class="attr">keyup.media-play-pause</span>=<span class="string">"method"</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>给 <code>v-on</code> 自定义键位别名。</p>
</li>
</ul>
<h3 id="performance"><a href="#performance" class="headerlink" title="performance" data-scroll="">performance</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>false (自 2.2.3 起)</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>设置为 <code>true</code> 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark" target="_blank" rel="noopener"><code>performance.mark</code></a> API 的浏览器上。</p>
</li>
</ul>
<h3 id="productionTip"><a href="#productionTip" class="headerlink" title="productionTip" data-scroll="">productionTip</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>true</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>设置为 <code>false</code> 以阻止 vue 在启动时生成生产提示。</p>
</li>
</ul>
<h2 id="全局-API"><a href="#全局-API" class="headerlink" title="全局 API" data-scroll="">全局 API</a></h2><h3 id="Vue-extend"><a href="#Vue-extend" class="headerlink" title="Vue.extend( options )" data-scroll="">Vue.extend( options )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object} options</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。</p>
<p><code>data</code> 选项是特例，需要注意 - 在 <code>Vue.extend()</code> 中它必须是函数</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"mount-point"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 创建构造器</span></span><br><span class="line"><span class="keyword">var</span> Profile = Vue.extend({</span><br><span class="line">  template: <span class="string">'&lt;p&gt;{{firstName}} {{lastName}} aka {{alias}}&lt;/p&gt;'</span>,</span><br><span class="line">  data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> {</span><br><span class="line">      firstName: <span class="string">'Walter'</span>,</span><br><span class="line">      lastName: <span class="string">'White'</span>,</span><br><span class="line">      alias: <span class="string">'Heisenberg'</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br><span class="line"><span class="comment">// 创建 Profile 实例，并挂载到一个元素上。</span></span><br><span class="line"><span class="keyword">new</span> Profile().$mount(<span class="string">'#mount-point'</span>)</span><br></pre></td></tr></tbody></table></figure>
<p>结果如下：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Walter White aka Heisenberg<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components.html">组件</a></p>
</li>
</ul>
<h3 id="Vue-nextTick"><a href="#Vue-nextTick" class="headerlink" title="Vue.nextTick( [callback, context] )" data-scroll="">Vue.nextTick( [callback, context] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Function} [callback]</code></li>
<li><code>{Object} [context]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 修改数据</span></span><br><span class="line">vm.msg = <span class="string">'Hello'</span></span><br><span class="line"><span class="comment">// DOM 还没有更新</span></span><br><span class="line">Vue.nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">  <span class="comment">// DOM 更新了</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)</span></span><br><span class="line">Vue.nextTick()</span><br><span class="line">  .then(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="comment">// DOM 更新了</span></span><br><span class="line">  })</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。</p>
</blockquote>
</li>
</ul>
<h3 id="Vue-set"><a href="#Vue-set" class="headerlink" title="Vue.set( target, key, value )" data-scroll="">Vue.set( target, key, value )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key</code></li>
<li><code>{any} value</code></li>
</ul>
</li>
<li><p><strong>返回值</strong>：设置的值。</p>
</li>
<li><p><strong>用法</strong>：</p>
<p>向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 <code>this.myObject.newProperty = 'hi'</code>)</p>
<p class="tip">注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。</p>

</li>
</ul>
<h3 id="Vue-delete"><a href="#Vue-delete" class="headerlink" title="Vue.delete( target, key )" data-scroll="">Vue.delete( target, key )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key/index</code></li>
</ul>
<blockquote>
<p>仅在 2.2.0+ 版本中支持 Array + index 用法。</p>
</blockquote>
</li>
<li><p><strong>用法</strong>：</p>
<p>删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。</p>
<blockquote>
<p>在 2.2.0+ 中同样支持在数组上工作。</p>
</blockquote>
<p class="tip">目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。</p>

</li>
</ul>
<h3 id="Vue-directive"><a href="#Vue-directive" class="headerlink" title="Vue.directive( id, [definition] )" data-scroll="">Vue.directive( id, [definition] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} id</code></li>
<li><code>{Function | Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>注册或获取全局指令。</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 注册</span></span><br><span class="line">Vue.directive(<span class="string">'my-directive'</span>, {</span><br><span class="line">  bind: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{},</span><br><span class="line">  inserted: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{},</span><br><span class="line">  update: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{},</span><br><span class="line">  componentUpdated: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{},</span><br><span class="line">  unbind: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{}</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册 (指令函数)</span></span><br><span class="line">Vue.directive(<span class="string">'my-directive'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">  <span class="comment">// 这里将会被 `bind` 和 `update` 调用</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// getter，返回已注册的指令</span></span><br><span class="line"><span class="keyword">var</span> myDirective = Vue.directive(<span class="string">'my-directive'</span>)</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/custom-directive.html">自定义指令</a></p>
</li>
</ul>
<h3 id="Vue-filter"><a href="#Vue-filter" class="headerlink" title="Vue.filter( id, [definition] )" data-scroll="">Vue.filter( id, [definition] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} id</code></li>
<li><code>{Function} [definition]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>注册或获取全局过滤器。</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 注册</span></span><br><span class="line">Vue.filter(<span class="string">'my-filter'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</span><br><span class="line">  <span class="comment">// 返回处理后的值</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// getter，返回已注册的过滤器</span></span><br><span class="line"><span class="keyword">var</span> myFilter = Vue.filter(<span class="string">'my-filter'</span>)</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/filters.html">过滤器</a></p>
</li>
</ul>
<h3 id="Vue-component"><a href="#Vue-component" class="headerlink" title="Vue.component( id, [definition] )" data-scroll="">Vue.component( id, [definition] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} id</code></li>
<li><code>{Function | Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>注册或获取全局组件。注册还会自动使用给定的<code>id</code>设置组件的名称</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 注册组件，传入一个扩展过的构造器</span></span><br><span class="line">Vue.component(<span class="string">'my-component'</span>, Vue.extend({ <span class="comment">/* ... */</span> }))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册组件，传入一个选项对象 (自动调用 Vue.extend)</span></span><br><span class="line">Vue.component(<span class="string">'my-component'</span>, { <span class="comment">/* ... */</span> })</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取注册的组件 (始终返回构造器)</span></span><br><span class="line"><span class="keyword">var</span> MyComponent = Vue.component(<span class="string">'my-component'</span>)</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components.html">组件</a></p>
</li>
</ul>
<h3 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use( plugin )" data-scroll="">Vue.use( plugin )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Function} plugin</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>安装 Vue.js 插件。如果插件是一个对象，必须提供 <code>install</code> 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。</p>
<p>该方法需要在调用 <code>new Vue()</code> 之前被调用。</p>
<p>当 install 方法被同一个插件多次调用，插件将只会被安装一次。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/plugins.html">插件</a></p>
</li>
</ul>
<h3 id="Vue-mixin"><a href="#Vue-mixin" class="headerlink" title="Vue.mixin( mixin )" data-scroll="">Vue.mixin( mixin )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object} mixin</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。<strong>不推荐在应用代码中使用</strong>。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/mixins.html#全局混入">全局混入</a></p>
</li>
</ul>
<h3 id="Vue-compile"><a href="#Vue-compile" class="headerlink" title="Vue.compile( template )" data-scroll="">Vue.compile( template )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} template</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>在 render 函数中编译模板字符串。<strong>只在独立构建时有效</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> res = Vue.compile(<span class="string">'&lt;div&gt;&lt;span&gt;{{ msg }}&lt;/span&gt;&lt;/div&gt;'</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  data: {</span><br><span class="line">    msg: <span class="string">'hello'</span></span><br><span class="line">  },</span><br><span class="line">  render: res.render,</span><br><span class="line">  staticRenderFns: res.staticRenderFns</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/render-function.html">渲染函数</a></p>
</li>
</ul>
<h3 id="Vue-version"><a href="#Vue-version" class="headerlink" title="Vue.version" data-scroll="">Vue.version</a></h3><ul>
<li><p><strong>细节</strong>：提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用，你可以根据不同的版本号采取不同的策略。</p>
</li>
<li><p><strong>用法</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> version = <span class="built_in">Number</span>(Vue.version.split(<span class="string">'.'</span>)[<span class="number">0</span>])</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (version === <span class="number">2</span>) {</span><br><span class="line">  <span class="comment">// Vue v2.x.x</span></span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (version === <span class="number">1</span>) {</span><br><span class="line">  <span class="comment">// Vue v1.x.x</span></span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line">  <span class="comment">// Unsupported versions of Vue</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h2 id="选项-数据"><a href="#选项-数据" class="headerlink" title="选项 / 数据" data-scroll="">选项 / 数据</a></h2><h3 id="data"><a href="#data" class="headerlink" title="data" data-scroll="">data</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object | Function</code></p>
</li>
<li><p><strong>限制</strong>：组件的定义只接受 <code>function</code>。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。<strong>对象必须是纯粹的对象 (含有零个或多个的 key/value 对)</strong>：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。</p>
<p>一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。</p>
<p>实例创建之后，可以通过 <code>vm.$data</code> 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 <code>vm.a</code> 等价于访问 <code>vm.$data.a</code>。</p>
<p>以 <code>_</code> 或 <code>$</code> 开头的属性 <strong>不会</strong> 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 <code>vm.$data._property</code> 的方式访问这些属性。</p>
<p>当一个<strong>组件</strong>被定义，<code>data</code> 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 <code>data</code> 仍然是一个纯粹的对象，则所有的实例将<strong>共享引用</strong>同一个数据对象！通过提供 <code>data</code> 函数，每次创建一个新实例后，我们能够调用 <code>data</code> 函数，从而返回初始数据的一个全新副本数据对象。</p>
<p>如果需要，可以通过将 <code>vm.$data</code> 传入 <code>JSON.parse(JSON.stringify(...))</code> 得到深拷贝的原始数据对象。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> data = { <span class="attr">a</span>: <span class="number">1</span> }</span><br><span class="line"></span><br><span class="line"><span class="comment">// 直接创建一个实例</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: data</span><br><span class="line">})</span><br><span class="line">vm.a <span class="comment">// =&gt; 1</span></span><br><span class="line">vm.$data === data <span class="comment">// =&gt; true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue.extend() 中 data 必须是函数</span></span><br><span class="line"><span class="keyword">var</span> Component = Vue.extend({</span><br><span class="line">  data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> { <span class="attr">a</span>: <span class="number">1</span> }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>注意，如果你为 <code>data</code> 属性使用了箭头函数，则 <code>this</code> 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">data: <span class="function"><span class="params">vm</span> =&gt;</span> ({ <span class="attr">a</span>: vm.myProp })</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="props"><a href="#props" class="headerlink" title="props" data-scroll="">props</a></h3><ul>
<li><p><strong>类型</strong>：<code>Array&lt;string&gt; | Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 简单语法</span></span><br><span class="line">Vue.component(<span class="string">'props-demo-simple'</span>, {</span><br><span class="line">  props: [<span class="string">'size'</span>, <span class="string">'myMessage'</span>]</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象语法，提供校验</span></span><br><span class="line">Vue.component(<span class="string">'props-demo-advanced'</span>, {</span><br><span class="line">  props: {</span><br><span class="line">    <span class="comment">// 检测类型</span></span><br><span class="line">    height: <span class="built_in">Number</span>,</span><br><span class="line">    <span class="comment">// 检测类型 + 其他验证</span></span><br><span class="line">    age: {</span><br><span class="line">      type: <span class="built_in">Number</span>,</span><br><span class="line">      <span class="keyword">default</span>: <span class="number">0</span>,</span><br><span class="line">      required: <span class="literal">true</span>,</span><br><span class="line">      validator: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</span><br><span class="line">        <span class="keyword">return</span> value &gt;= <span class="number">0</span></span><br><span class="line">      }</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components.html#通过-Prop-向子组件传递数据">Props</a></p>
</li>
</ul>
<h3 id="propsData"><a href="#propsData" class="headerlink" title="propsData" data-scroll="">propsData</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: any }</code></p>
</li>
<li><p><strong>限制</strong>：只用于 <code>new</code> 创建的实例中。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>创建实例时传递 props。主要作用是方便测试。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Comp = Vue.extend({</span><br><span class="line">  props: [<span class="string">'msg'</span>],</span><br><span class="line">  template: <span class="string">'&lt;div&gt;{{ msg }}&lt;/div&gt;'</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Comp({</span><br><span class="line">  propsData: {</span><br><span class="line">    msg: <span class="string">'hello'</span></span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="computed"><a href="#computed" class="headerlink" title="computed" data-scroll="">computed</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: Function | { get: Function, set: Function } }</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。</p>
<p>注意如果你为一个计算属性使用了箭头函数，则 <code>this</code> 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">computed: {</span><br><span class="line">  aDouble: <span class="function"><span class="params">vm</span> =&gt;</span> vm.a * <span class="number">2</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是<strong>不会</strong>被更新的。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: { <span class="attr">a</span>: <span class="number">1</span> },</span><br><span class="line">  computed: {</span><br><span class="line">    <span class="comment">// 仅读取</span></span><br><span class="line">    aDouble: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.a * <span class="number">2</span></span><br><span class="line">    },</span><br><span class="line">    <span class="comment">// 读取和设置</span></span><br><span class="line">    aPlus: {</span><br><span class="line">      get: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.a + <span class="number">1</span></span><br><span class="line">      },</span><br><span class="line">      set: <span class="function"><span class="keyword">function</span> (<span class="params">v</span>) </span>{</span><br><span class="line">        <span class="keyword">this</span>.a = v - <span class="number">1</span></span><br><span class="line">      }</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br><span class="line">vm.aPlus   <span class="comment">// =&gt; 2</span></span><br><span class="line">vm.aPlus = <span class="number">3</span></span><br><span class="line">vm.a       <span class="comment">// =&gt; 2</span></span><br><span class="line">vm.aDouble <span class="comment">// =&gt; 4</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/computed.html">计算属性</a></p>
</li>
</ul>
<h3 id="methods"><a href="#methods" class="headerlink" title="methods" data-scroll="">methods</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: Function }</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 <code>this</code> 自动绑定为 Vue 实例。</p>
<p class="tip">注意，<strong>不应该使用箭头函数来定义 method 函数</strong> (例如 <code>plus: () =&gt; this.a++</code>)。理由是箭头函数绑定了父级作用域的上下文，所以 <code>this</code> 将不会按照期望指向 Vue 实例，<code>this.a</code> 将是 undefined。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: { <span class="attr">a</span>: <span class="number">1</span> },</span><br><span class="line">  methods: {</span><br><span class="line">    plus: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">this</span>.a++</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br><span class="line">vm.plus()</span><br><span class="line">vm.a <span class="comment">// 2</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/events.html">事件处理器</a></p>
</li>
</ul>
<h3 id="watch"><a href="#watch" class="headerlink" title="watch" data-scroll="">watch</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: string | Function | Object | Array }</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 <code>$watch()</code>，遍历 watch 对象的每一个属性。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line">  data: {</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span>,</span><br><span class="line">    c: <span class="number">3</span>,</span><br><span class="line">    d: <span class="number">4</span>,</span><br><span class="line">    e: {</span><br><span class="line">      f: {</span><br><span class="line">        g: <span class="number">5</span></span><br><span class="line">      }</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  watch: {</span><br><span class="line">    a: <span class="function"><span class="keyword">function</span> (<span class="params">val, oldVal</span>) </span>{</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'new: %s, old: %s'</span>, val, oldVal)</span><br><span class="line">    },</span><br><span class="line">    <span class="comment">// 方法名</span></span><br><span class="line">    b: <span class="string">'someMethod'</span>,</span><br><span class="line">    <span class="comment">// 深度 watcher</span></span><br><span class="line">    c: {</span><br><span class="line">      handler: <span class="function"><span class="keyword">function</span> (<span class="params">val, oldVal</span>) </span>{ <span class="comment">/* ... */</span> },</span><br><span class="line">      deep: <span class="literal">true</span></span><br><span class="line">    },</span><br><span class="line">    <span class="comment">// 该回调将会在侦听开始之后被立即调用</span></span><br><span class="line">    d: {</span><br><span class="line">      handler: <span class="function"><span class="keyword">function</span> (<span class="params">val, oldVal</span>) </span>{ <span class="comment">/* ... */</span> },</span><br><span class="line">      immediate: <span class="literal">true</span></span><br><span class="line">    },</span><br><span class="line">    e: [</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">handle1</span> (<span class="params">val, oldVal</span>) </span>{ <span class="comment">/* ... */</span> },</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">handle2</span> (<span class="params">val, oldVal</span>) </span>{ <span class="comment">/* ... */</span> }</span><br><span class="line">    ],</span><br><span class="line">    <span class="comment">// watch vm.e.f's value: {g: 5}</span></span><br><span class="line">    <span class="string">'e.f'</span>: <span class="function"><span class="keyword">function</span> (<span class="params">val, oldVal</span>) </span>{ <span class="comment">/* ... */</span> }</span><br><span class="line">  }</span><br><span class="line">})</span><br><span class="line">vm.a = <span class="number">2</span> <span class="comment">// =&gt; new: 2, old: 1</span></span><br></pre></td></tr></tbody></table></figure>
<p class="tip">注意，<strong>不应该使用箭头函数来定义 watcher 函数</strong> (例如 <code>searchQuery: newValue =&gt; this.updateAutocomplete(newValue)</code>)。理由是箭头函数绑定了父级作用域的上下文，所以 <code>this</code> 将不会按照期望指向 Vue 实例，<code>this.updateAutocomplete</code> 将是 undefined。</p>
</li>
<li><p><strong>参考</strong>：<a href="#vm-watch">实例方法 / 数据 - vm.$watch</a></p>
</li>
</ul>
<h2 id="选项-DOM"><a href="#选项-DOM" class="headerlink" title="选项 / DOM" data-scroll="">选项 / DOM</a></h2><h3 id="el"><a href="#el" class="headerlink" title="el" data-scroll="">el</a></h3><ul>
<li><p><strong>类型</strong>：<code>string | HTMLElement</code></p>
</li>
<li><p><strong>限制</strong>：只在由 <code>new</code> 创建的实例中遵守。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。</p>
<p>在实例挂载之后，元素可以用 <code>vm.$el</code> 访问。</p>
<p>如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 <code>vm.$mount()</code> 手动开启编译。</p>
<p class="tip"> 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <code>&lt;html&gt;</code> 或者 <code>&lt;body&gt;</code> 上。</p>

<p class="tip">如果 <code>render</code> 函数和 <code>template</code> 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/instance.html#生命周期图示">生命周期图示</a></li>
<li><a href="../guide/installation.html#运行时-编译器-vs-只包含运行时">运行时 + 编译器 vs. 只包含运行时</a></li>
</ul>
</li>
</ul>
<h3 id="template"><a href="#template" class="headerlink" title="template" data-scroll="">template</a></h3><ul>
<li><p><strong>类型</strong>：<code>string</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>一个字符串模板作为 Vue 实例的标识使用。模板将会 <strong>替换</strong> 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。</p>
<p>如果值以 <code>#</code> 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <code>&lt;script type="x-template"&gt;</code> 包含模板。</p>
<p class="tip">出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。</p>

<p class="tip">如果 Vue 选项中包含渲染函数，该模板将被忽略。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/instance.html#生命周期图示">生命周期图示</a></li>
<li><a href="../guide/components.html#使用插槽分发内容">用插槽分发内容</a></li>
</ul>
</li>
</ul>
<h3 id="render"><a href="#render" class="headerlink" title="render" data-scroll="">render</a></h3><ul>
<li><p><strong>类型</strong>：<code>(createElement: () =&gt; VNode) =&gt; VNode</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 <code>createElement</code> 方法作为第一个参数用来创建 <code>VNode</code>。</p>
<p>如果组件是一个函数组件，渲染函数还会接收一个额外的 <code>context</code> 参数，为没有实例的函数组件提供上下文信息。</p>
<p class="tip">Vue 选项中的 <code>render</code> 函数若存在，则 Vue 构造函数不会从 <code>template</code> 选项或通过 <code>el</code> 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/render-function.html">渲染函数</a></p>
</li>
</ul>
<h3 id="renderError"><a href="#renderError" class="headerlink" title="renderError" data-scroll="">renderError</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>(createElement: () =&gt; VNode, error: Error) =&gt; VNode</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p><strong>只在开发者环境下工作。</strong></p>
<p>当 <code>render</code> 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 <code>renderError</code>。这个功能配合 hot-reload 非常实用。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  render (h) {</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'oops'</span>)</span><br><span class="line">  },</span><br><span class="line">  renderError (h, err) {</span><br><span class="line">    <span class="keyword">return</span> h(<span class="string">'pre'</span>, { <span class="attr">style</span>: { <span class="attr">color</span>: <span class="string">'red'</span> }}, err.stack)</span><br><span class="line">  }</span><br><span class="line">}).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/render-function.html">渲染函数</a></p>
</li>
</ul>
<h2 id="选项-生命周期钩子"><a href="#选项-生命周期钩子" class="headerlink" title="选项 / 生命周期钩子" data-scroll="">选项 / 生命周期钩子</a></h2><p class="tip">所有的生命周期钩子自动绑定 <code>this</code> 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着<strong>你不能使用箭头函数来定义一个生命周期方法</strong> (例如 <code>created: () =&gt; this.fetchTodos()</code>)。这是因为箭头函数绑定了父上下文，因此 <code>this</code> 与你期待的 Vue 实例不同，<code>this.fetchTodos</code> 的行为未定义。</p>

<h3 id="beforeCreate"><a href="#beforeCreate" class="headerlink" title="beforeCreate" data-scroll="">beforeCreate</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="created"><a href="#created" class="headerlink" title="created" data-scroll="">created</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，<code>$el</code> 属性目前不可见。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="beforeMount"><a href="#beforeMount" class="headerlink" title="beforeMount" data-scroll="">beforeMount</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>在挂载开始之前被调用：相关的 <code>render</code> 函数首次被调用。</p>
<p><strong>该钩子在服务器端渲染期间不被调用。</strong></p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="mounted"><a href="#mounted" class="headerlink" title="mounted" data-scroll="">mounted</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p><code>el</code> 被新创建的 <code>vm.$el</code> 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 <code>mounted</code> 被调用时 <code>vm.$el</code> 也在文档内。</p>
<p>注意 <code>mounted</code> <strong>不会</strong>承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 <a href="#vm-nextTick">vm.$nextTick</a> 替换掉 <code>mounted</code>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">mounted: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">  <span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="comment">// Code that will run only after the</span></span><br><span class="line">    <span class="comment">// entire view has been rendered</span></span><br><span class="line">  })</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p><strong>该钩子在服务器端渲染期间不被调用。</strong></p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="beforeUpdate"><a href="#beforeUpdate" class="headerlink" title="beforeUpdate" data-scroll="">beforeUpdate</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。</p>
<p><strong>该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。</strong></p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="updated"><a href="#updated" class="headerlink" title="updated" data-scroll="">updated</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。</p>
<p>当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用<a href="#computed">计算属性</a>或 <a href="#watch">watcher</a> 取而代之。</p>
<p>注意 <code>updated</code> <strong>不会</strong>承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 <a href="#vm-nextTick">vm.$nextTick</a> 替换掉 <code>updated</code>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">updated: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">  <span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="comment">// Code that will run only after the</span></span><br><span class="line">    <span class="comment">// entire view has been re-rendered</span></span><br><span class="line">  })</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p><strong>该钩子在服务器端渲染期间不被调用。</strong></p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="activated"><a href="#activated" class="headerlink" title="activated" data-scroll="">activated</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>keep-alive 组件激活时调用。</p>
<p><strong>该钩子在服务器端渲染期间不被调用。</strong></p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="#keep-alive">构建组件 - keep-alive</a></li>
<li><a href="../guide/components.html#keep-alive">动态组件 - keep-alive</a></li>
</ul>
</li>
</ul>
<h3 id="deactivated"><a href="#deactivated" class="headerlink" title="deactivated" data-scroll="">deactivated</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>keep-alive 组件停用时调用。</p>
<p><strong>该钩子在服务器端渲染期间不被调用。</strong></p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="#keep-alive">构建组件 - keep-alive</a></li>
<li><a href="../guide/components.html#keep-alive">动态组件 - keep-alive</a></li>
</ul>
</li>
</ul>
<h3 id="beforeDestroy"><a href="#beforeDestroy" class="headerlink" title="beforeDestroy" data-scroll="">beforeDestroy</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>实例销毁之前调用。在这一步，实例仍然完全可用。</p>
<p><strong>该钩子在服务器端渲染期间不被调用。</strong></p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="destroyed"><a href="#destroyed" class="headerlink" title="destroyed" data-scroll="">destroyed</a></h3><ul>
<li><p><strong>类型</strong>：<code>Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</p>
<p><strong>该钩子在服务器端渲染期间不被调用。</strong></p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h3 id="errorCaptured"><a href="#errorCaptured" class="headerlink" title="errorCaptured" data-scroll="">errorCaptured</a></h3><blockquote>
<p>2.5.0+ 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>(err: Error, vm: Component, info: string) =&gt; ?boolean</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 <code>false</code> 以阻止该错误继续向上传播。</p>
<p class="tip">你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。</p>

<p><strong>错误传播规则</strong></p>
<ul>
<li><p>默认情况下，如果全局的 <code>config.errorHandler</code> 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。</p>
</li>
<li><p>如果一个组件的继承或父级从属链路中存在多个 <code>errorCaptured</code> 钩子，则它们将会被相同的错误逐个唤起。</p>
</li>
<li><p>如果此 <code>errorCaptured</code> 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 <code>config.errorHandler</code>。</p>
</li>
<li><p>一个 <code>errorCaptured</code> 钩子能够返回 <code>false</code> 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 <code>errorCaptured</code> 钩子和全局的 <code>config.errorHandler</code>。</p>
</li>
</ul>
</li>
</ul>
<h2 id="选项-资源" data-scroll-id="选项-资源" tabindex="-1" style="outline: none;"><a href="#选项-资源" class="headerlink" title="选项 / 资源" data-scroll="">选项 / 资源</a></h2><h3 id="directives"><a href="#directives" class="headerlink" title="directives" data-scroll="">directives</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
</li>
</ul>
<p>包含 Vue 实例可用指令的哈希表。</p>
<ul>
<li><strong>参考</strong>：<a href="../guide/custom-directive.html">自定义指令</a></li>
</ul>
<h3 id="filters"><a href="#filters" class="headerlink" title="filters" data-scroll="">filters</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
</li>
</ul>
<p>包含 Vue 实例可用过滤器的哈希表。</p>
<ul>
<li><strong>参考</strong>：<a href="#Vue-filter"><code>Vue.filter</code></a></li>
</ul>
<h3 id="components"><a href="#components" class="headerlink" title="components" data-scroll="">components</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
</li>
</ul>
<p>包含 Vue 实例可用组件的哈希表。</p>
<ul>
<li><strong>参考</strong>：<a href="../guide/components.html">组件</a></li>
</ul>
<h2 id="选项-组合"><a href="#选项-组合" class="headerlink" title="选项 / 组合" data-scroll="">选项 / 组合</a></h2><h3 id="parent"><a href="#parent" class="headerlink" title="parent" data-scroll="">parent</a></h3><ul>
<li><p><strong>类型</strong>：<code>Vue instance</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 <code>this.$parent</code> 访问父实例，子实例被推入父实例的 <code>$children</code> 数组中。</p>
<p class="tip">节制地使用 <code>$parent</code> 和 <code>$children</code> - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信</p>

</li>
</ul>
<h3 id="mixins"><a href="#mixins" class="headerlink" title="mixins" data-scroll="">mixins</a></h3><ul>
<li><p><strong>类型</strong>：<code>Array&lt;Object&gt;</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p><code>mixins</code> 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 <code>Vue.extend()</code> 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。<br>Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> mixin = {</span><br><span class="line">  created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ <span class="built_in">console</span>.log(<span class="number">1</span>) }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line">  created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ <span class="built_in">console</span>.log(<span class="number">2</span>) },</span><br><span class="line">  mixins: [mixin]</span><br><span class="line">})</span><br><span class="line"><span class="comment">// =&gt; 1</span></span><br><span class="line"><span class="comment">// =&gt; 2</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/mixins.html">混入</a></p>
</li>
</ul>
<h3 id="extends"><a href="#extends" class="headerlink" title="extends" data-scroll="">extends</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object | Function</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 <code>Vue.extend</code>。这主要是为了便于扩展单文件组件。</p>
<p>这和 <code>mixins</code> 类似。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> CompA = { ... }</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在没有调用 `Vue.extend` 时候继承 CompA</span></span><br><span class="line"><span class="keyword">var</span> CompB = {</span><br><span class="line">  extends: CompA,</span><br><span class="line">  ...</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="provide-inject"><a href="#provide-inject" class="headerlink" title="provide / inject" data-scroll="">provide / inject</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：</p>
<ul>
<li><strong>provide</strong>：<code>Object | () =&gt; Object</code></li>
<li><strong>inject</strong>：<code>Array&lt;string&gt; | { [key: string]: string | Symbol | Object }</code></li>
</ul>
</li>
<li><p><strong>详细</strong>：</p>
<p class="tip"><code>provide</code> 和 <code>inject</code> 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。</p>

<p>这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。</p>
<p><code>provide</code> 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 <code>Symbol</code> 和 <code>Reflect.ownKeys</code> 的环境下可工作。</p>
<p><code>inject</code> 选项应该是：</p>
<ul>
<li>一个字符串数组，或</li>
<li>一个对象，对象的 key 是本地的绑定名，value 是：<ul>
<li>在可用的注入内容中搜索用的 key (字符串或 Symbol)，或</li>
<li>一个对象，该对象的：<ul>
<li><code>from</code> 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)</li>
<li><code>default</code> 属性是降级情况下使用的 value</li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>提示：<code>provide</code> 和 <code>inject</code> 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。</p>
</blockquote>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 父级组件提供 'foo'</span></span><br><span class="line"><span class="keyword">var</span> Provider = {</span><br><span class="line">  provide: {</span><br><span class="line">    foo: <span class="string">'bar'</span></span><br><span class="line">  },</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 子组件注入 'foo'</span></span><br><span class="line"><span class="keyword">var</span> Child = {</span><br><span class="line">  inject: [<span class="string">'foo'</span>],</span><br><span class="line">  created () {</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.foo) <span class="comment">// =&gt; "bar"</span></span><br><span class="line">  }</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>利用 ES2015 Symbols、函数 <code>provide</code> 和对象 <code>inject</code>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> s = <span class="built_in">Symbol</span>()</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Provider = {</span><br><span class="line">  provide () {</span><br><span class="line">    <span class="keyword">return</span> {</span><br><span class="line">      [s]: <span class="string">'foo'</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Child = {</span><br><span class="line">  inject: { s },</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 <code>props</code> 和 <code>data</code> 初始化之后得到。</p>
</blockquote>
<p>使用一个注入的值作为一个属性的默认值：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Child = {</span><br><span class="line">  inject: [<span class="string">'foo'</span>],</span><br><span class="line">  props: {</span><br><span class="line">    bar: {</span><br><span class="line">      <span class="keyword">default</span> () {</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.foo</span><br><span class="line">      }</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>使用一个注入的值作为数据入口：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Child = {</span><br><span class="line">  inject: [<span class="string">'foo'</span>],</span><br><span class="line">  data () {</span><br><span class="line">    <span class="keyword">return</span> {</span><br><span class="line">      bar: <span class="keyword">this</span>.foo</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：</p>
</blockquote>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Child = {</span><br><span class="line">  inject: {</span><br><span class="line">    foo: { <span class="attr">default</span>: <span class="string">'foo'</span> }</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>如果它需要从一个不同名字的属性注入，则使用 <code>from</code> 来表示其源属性：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Child = {</span><br><span class="line">  inject: {</span><br><span class="line">    foo: {</span><br><span class="line">      <span class="keyword">from</span>: <span class="string">'bar'</span>,</span><br><span class="line">      <span class="keyword">default</span>: <span class="string">'foo'</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>与 prop 的默认值类似，你需要对非原始值使用一个工厂方法：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Child = {</span><br><span class="line">  inject: {</span><br><span class="line">    foo: {</span><br><span class="line">      <span class="keyword">from</span>: <span class="string">'bar'</span>,</span><br><span class="line">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h2 id="选项-其它"><a href="#选项-其它" class="headerlink" title="选项 / 其它" data-scroll="">选项 / 其它</a></h2><h3 id="name"><a href="#name" class="headerlink" title="name" data-scroll="">name</a></h3><ul>
<li><p><strong>类型</strong>：<code>string</code></p>
</li>
<li><p><strong>限制</strong>：只有作为组件选项时起作用。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>允许组件模板递归地调用自身。注意，组件在全局用 <code>Vue.component()</code> 注册时，全局 ID 自动作为组件的 name。</p>
<p>指定 <code>name</code> 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 <a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="noopener">vue-devtools</a>，未命名组件将显示成 <code>&lt;AnonymousComponent&gt;</code>，这很没有语义。通过提供 <code>name</code> 选项，可以获得更有语义信息的组件树。</p>
</li>
</ul>
<h3 id="delimiters"><a href="#delimiters" class="headerlink" title="delimiters" data-scroll="">delimiters</a></h3><ul>
<li><p><strong>类型</strong>：<code>Array&lt;string&gt;</code></p>
</li>
<li><p><strong>默认值</strong>：<code>["{{", "}}"]</code></p>
</li>
<li><p><strong>限制</strong>：这个选项只在完整构建版本中的浏览器内编译时可用。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>改变纯文本插入分隔符。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  delimiters: [<span class="string">'${'</span>, <span class="string">'}'</span>]</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 分隔符变成了 ES6 模板字符串的风格</span></span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="functional"><a href="#functional" class="headerlink" title="functional" data-scroll="">functional</a></h3><ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>使组件无状态 (没有 <code>data</code> ) 和无实例 (没有 <code>this</code> 上下文)。他们用一个简单的 <code>render</code> 函数返回虚拟节点使他们更容易渲染。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/render-function.html#函数式组件">函数式组件</a></p>
</li>
</ul>
<h3 id="model"><a href="#model" class="headerlink" title="model" data-scroll="">model</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>{ prop?: string, event?: string }</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>允许一个自定义组件在使用 <code>v-model</code> 时定制 prop 和 event。默认情况下，一个组件上的 <code>v-model</code> 会把 <code>value</code> 用作 prop 且把 <code>input</code> 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 <code>value</code> prop 来达到不同的目的。使用 <code>model</code> 选项可以回避这些情况产生的冲突。</p>
</li>
<li><p><strong>Example</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.component(<span class="string">'my-checkbox'</span>, {</span><br><span class="line">  model: {</span><br><span class="line">    prop: <span class="string">'checked'</span>,</span><br><span class="line">    event: <span class="string">'change'</span></span><br><span class="line">  },</span><br><span class="line">  props: {</span><br><span class="line">    <span class="comment">// this allows using the `value` prop for a different purpose</span></span><br><span class="line">    value: <span class="built_in">String</span>,</span><br><span class="line">    <span class="comment">// use `checked` as the prop which take the place of `value`</span></span><br><span class="line">    checked: {</span><br><span class="line">      type: <span class="built_in">Number</span>,</span><br><span class="line">      <span class="keyword">default</span>: <span class="number">0</span></span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">my-checkbox</span> <span class="attr">v-model</span>=<span class="string">"foo"</span> <span class="attr">value</span>=<span class="string">"some value"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-checkbox</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>上述代码相当于：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">my-checkbox</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:checked</span>=<span class="string">"foo"</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">change</span>=<span class="string">"val =&gt; { foo = val }"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">value</span>=<span class="string">"some value"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">my-checkbox</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="inheritAttrs"><a href="#inheritAttrs" class="headerlink" title="inheritAttrs" data-scroll="">inheritAttrs</a></h3><blockquote>
<p>2.4.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>true</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 <code>inheritAttrs</code> 到 <code>false</code>，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 <code>$attrs</code> 可以让这些特性生效，且可以通过 <code>v-bind</code> 显性的绑定到非根元素上。</p>
<p>注意：这个选项<strong>不影响</strong> <code>class</code> 和 <code>style</code> 绑定。</p>
</li>
</ul>
<h3 id="comments"><a href="#comments" class="headerlink" title="comments" data-scroll="">comments</a></h3><blockquote>
<p>2.4.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>false</code></p>
</li>
<li><p><strong>限制</strong>：这个选项只在完整构建版本中的浏览器内编译时可用。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当设为 <code>true</code> 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。</p>
</li>
</ul>
<h2 id="实例属性"><a href="#实例属性" class="headerlink" title="实例属性" data-scroll="">实例属性</a></h2><h3 id="vm-data"><a href="#vm-data" class="headerlink" title="vm.$data" data-scroll="">vm.$data</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。</p>
</li>
<li><p><strong>参考</strong>：<a href="#data">选项 / 数据 - data</a></p>
</li>
</ul>
<h3 id="vm-props"><a href="#vm-props" class="headerlink" title="vm.$props" data-scroll="">vm.$props</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。</p>
</li>
</ul>
<h3 id="vm-el"><a href="#vm-el" class="headerlink" title="vm.$el" data-scroll="">vm.$el</a></h3><ul>
<li><p><strong>类型</strong>：<code>HTMLElement</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>Vue 实例使用的根 DOM 元素。</p>
</li>
</ul>
<h3 id="vm-options"><a href="#vm-options" class="headerlink" title="vm.$options" data-scroll="">vm.$options</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  customOption: <span class="string">'foo'</span>,</span><br><span class="line">  created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.$options.customOption) <span class="comment">// =&gt; 'foo'</span></span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="vm-parent"><a href="#vm-parent" class="headerlink" title="vm.$parent" data-scroll="">vm.$parent</a></h3><ul>
<li><p><strong>类型</strong>：<code>Vue instance</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>父实例，如果当前实例有的话。</p>
</li>
</ul>
<h3 id="vm-root"><a href="#vm-root" class="headerlink" title="vm.$root" data-scroll="">vm.$root</a></h3><ul>
<li><p><strong>类型</strong>：<code>Vue instance</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。</p>
</li>
</ul>
<h3 id="vm-children"><a href="#vm-children" class="headerlink" title="vm.$children" data-scroll="">vm.$children</a></h3><ul>
<li><p><strong>类型</strong>：<code>Array&lt;Vue instance&gt;</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前实例的直接子组件。<strong>需要注意 <code>$children</code> 并不保证顺序，也不是响应式的。</strong>如果你发现自己正在尝试使用 <code>$children</code> 来进行数据绑定，考虑使用一个数组配合 <code>v-for</code> 来生成子组件，并且使用 Array 作为真正的来源。</p>
</li>
</ul>
<h3 id="vm-slots"><a href="#vm-slots" class="headerlink" title="vm.$slots" data-scroll="">vm.$slots</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [name: string]: ?Array&lt;VNode&gt; }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>用来访问被<a href="../guide/components.html#使用插槽分发内容">插槽分发</a>的内容。每个<a href="../guide/components.html#具名插槽">具名插槽</a> 有其相应的属性 (例如：<code>slot="foo"</code> 中的内容将会在 <code>vm.$slots.foo</code> 中被找到)。<code>default</code> 属性包括了所有没有被包含在具名插槽中的节点。</p>
<p>在使用<a href="../guide/render-function.html">渲染函数</a>书写一个组件时，访问 <code>vm.$slots</code> 最有帮助。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">blog-post</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span> <span class="attr">slot</span>=<span class="string">"header"</span>&gt;</span></span><br><span class="line">    About Me</span><br><span class="line">  <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"footer"</span>&gt;</span></span><br><span class="line">    Copyright 2016 Evan You</span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>If I have some content down here, it will also be included in vm.$slots.default.<span class="tag">&lt;/<span class="name">p</span>&gt;</span>.</span><br><span class="line"><span class="tag">&lt;/<span class="name">blog-post</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.component(<span class="string">'blog-post'</span>, {</span><br><span class="line">  render: <span class="function"><span class="keyword">function</span> (<span class="params">createElement</span>) </span>{</span><br><span class="line">    <span class="keyword">var</span> header = <span class="keyword">this</span>.$slots.header</span><br><span class="line">    <span class="keyword">var</span> body   = <span class="keyword">this</span>.$slots.default</span><br><span class="line">    <span class="keyword">var</span> footer = <span class="keyword">this</span>.$slots.footer</span><br><span class="line">    <span class="keyword">return</span> createElement(<span class="string">'div'</span>, [</span><br><span class="line">      createElement(<span class="string">'header'</span>, header),</span><br><span class="line">      createElement(<span class="string">'main'</span>, body),</span><br><span class="line">      createElement(<span class="string">'footer'</span>, footer)</span><br><span class="line">    ])</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="#slot-1"><code>&lt;slot&gt;</code> 组件</a></li>
<li><a href="../guide/components.html#使用插槽分发内容">使用插槽分发内容</a></li>
<li><a href="../guide/render-function.html#插槽">渲染函数 - 插槽</a></li>
</ul>
</li>
</ul>
<h3 id="vm-scopedSlots"><a href="#vm-scopedSlots" class="headerlink" title="vm.$scopedSlots" data-scroll="">vm.$scopedSlots</a></h3><blockquote>
<p>2.1.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>{ [name: string]: props =&gt; VNode | Array&lt;VNode&gt; }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>用来访问<a href="../guide/components.html#作用域插槽">作用域插槽</a>。对于包括 <code>默认 slot</code> 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。</p>
<p><code>vm.$scopedSlots</code> 在使用<a href="../guide/render-function.html">渲染函数</a>开发一个组件时特别有用。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="#slot-1"><code>&lt;slot&gt;</code> 组件</a></li>
<li><a href="../guide/components.html#作用域插槽">作用域插槽</a></li>
<li><a href="../guide/render-function.html#插槽">渲染函数 - 插槽</a></li>
</ul>
</li>
</ul>
<h3 id="vm-refs"><a href="#vm-refs" class="headerlink" title="vm.$refs" data-scroll="">vm.$refs</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>一个对象，持有注册过 <a href="#ref"><code>ref</code> 特性</a> 的所有 DOM 元素和组件实例。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/components.html#子组件索引">子组件引用</a></li>
<li><a href="#ref">特殊特性 - ref</a></li>
</ul>
</li>
</ul>
<h3 id="vm-isServer"><a href="#vm-isServer" class="headerlink" title="vm.$isServer" data-scroll="">vm.$isServer</a></h3><ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前 Vue 实例是否运行于服务器。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/ssr.html">服务端渲染</a></p>
</li>
</ul>
<h3 id="vm-attrs"><a href="#vm-attrs" class="headerlink" title="vm.$attrs" data-scroll="">vm.$attrs</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: string }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (<code>class</code> 和 <code>style</code> 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (<code>class</code> 和 <code>style</code> 除外)，并且可以通过 <code>v-bind="$attrs"</code> 传入内部组件——在创建高级别的组件时非常有用。</p>
</li>
</ul>
<h3 id="vm-listeners"><a href="#vm-listeners" class="headerlink" title="vm.$listeners" data-scroll="">vm.$listeners</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: Function | Array&lt;Function&gt; }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>包含了父作用域中的 (不含 <code>.native</code> 修饰器的) <code>v-on</code> 事件监听器。它可以通过 <code>v-on="$listeners"</code> 传入内部组件——在创建更高层次的组件时非常有用。</p>
</li>
</ul>
<h2 id="实例方法-数据"><a href="#实例方法-数据" class="headerlink" title="实例方法 / 数据" data-scroll="">实例方法 / 数据</a></h2><h3 id="vm-watch"><a href="#vm-watch" class="headerlink" title="vm.$watch( expOrFn, callback, [options] )" data-scroll="">vm.$watch( expOrFn, callback, [options] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string | Function} expOrFn</code></li>
<li><code>{Function | Object} callback</code></li>
<li><code>{Object} [options]</code><ul>
<li><code>{boolean} deep</code></li>
<li><code>{boolean} immediate</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>返回值</strong>：<code>{Function} unwatch</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。</p>
<p class="tip">注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 键路径</span></span><br><span class="line">vm.$watch(<span class="string">'a.b.c'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>{</span><br><span class="line">  <span class="comment">// 做点什么</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数</span></span><br><span class="line">vm.$watch(</span><br><span class="line">  <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.a + <span class="keyword">this</span>.b</span><br><span class="line">  },</span><br><span class="line">  <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>{</span><br><span class="line">    <span class="comment">// 做点什么</span></span><br><span class="line">  }</span><br><span class="line">)</span><br></pre></td></tr></tbody></table></figure>
<p><code>vm.$watch</code> 返回一个取消观察函数，用来停止触发回调：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> unwatch = vm.$watch(<span class="string">'a'</span>, cb)</span><br><span class="line"><span class="comment">// 之后取消观察</span></span><br><span class="line">unwatch()</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>选项：deep</strong></p>
<p>为了发现对象内部值的变化，可以在选项参数中指定 <code>deep: true</code> 。注意监听数组的变动不需要这么做。</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">vm.$watch(<span class="string">'someObject'</span>, callback, {</span><br><span class="line">  deep: <span class="literal">true</span></span><br><span class="line">})</span><br><span class="line">vm.someObject.nestedValue = <span class="number">123</span></span><br><span class="line"><span class="comment">// callback is fired</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>选项：immediate</strong></p>
<p>在选项参数中指定 <code>immediate: true</code> 将立即以表达式的当前值触发回调：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">vm.$watch(<span class="string">'a'</span>, callback, {</span><br><span class="line">  immediate: <span class="literal">true</span></span><br><span class="line">})</span><br><span class="line"><span class="comment">// 立即以 `a` 的当前值触发回调</span></span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="vm-set"><a href="#vm-set" class="headerlink" title="vm.$set( target, key, value )" data-scroll="">vm.$set( target, key, value )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key</code></li>
<li><code>{any} value</code></li>
</ul>
</li>
<li><p><strong>返回值</strong>：设置的值。</p>
</li>
<li><p><strong>用法</strong>：</p>
<p>这是全局 <code>Vue.set</code> 的<strong>别名</strong>。</p>
</li>
<li><p><strong>参考</strong>：<a href="#Vue-set">Vue.set</a></p>
</li>
</ul>
<h3 id="vm-delete"><a href="#vm-delete" class="headerlink" title="vm.$delete( target, key )" data-scroll="">vm.$delete( target, key )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>这是全局 <code>Vue.delete</code> 的<strong>别名</strong>。</p>
</li>
<li><p><strong>参考</strong>：<a href="#Vue-delete">Vue.delete</a></p>
</li>
</ul>
<h2 id="实例方法-事件"><a href="#实例方法-事件" class="headerlink" title="实例方法 / 事件" data-scroll="">实例方法 / 事件</a></h2><h3 id="vm-on"><a href="#vm-on" class="headerlink" title="vm.$on( event, callback )" data-scroll="">vm.$on( event, callback )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string | Array&lt;string&gt;} event</code> (数组只在 2.2.0+ 中支持)</li>
<li><code>{Function} callback</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>监听当前实例上的自定义事件。事件可以由<code>vm.$emit</code>触发。回调函数会接收所有传入事件触发函数的额外参数。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">vm.$on(<span class="string">'test'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">msg</span>) </span>{</span><br><span class="line">  <span class="built_in">console</span>.log(msg)</span><br><span class="line">})</span><br><span class="line">vm.$emit(<span class="string">'test'</span>, <span class="string">'hi'</span>)</span><br><span class="line"><span class="comment">// =&gt; "hi"</span></span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="vm-once"><a href="#vm-once" class="headerlink" title="vm.$once( event, callback )" data-scroll="">vm.$once( event, callback )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} event</code></li>
<li><code>{Function} callback</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。</p>
</li>
</ul>
<h3 id="vm-off"><a href="#vm-off" class="headerlink" title="vm.$off( [event, callback] )" data-scroll="">vm.$off( [event, callback] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string | Array&lt;string&gt;} event</code> (只在 2.2.2+ 支持数组)</li>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>移除自定义事件监听器。</p>
<ul>
<li><p>如果没有提供参数，则移除所有的事件监听器；</p>
</li>
<li><p>如果只提供了事件，则移除该事件所有的监听器；</p>
</li>
<li><p>如果同时提供了事件与回调，则只移除这个回调的监听器。</p>
</li>
</ul>
</li>
</ul>
<h3 id="vm-emit"><a href="#vm-emit" class="headerlink" title="vm.$emit( eventName, […args] )" data-scroll="">vm.$emit( eventName, […args] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} eventName</code></li>
<li><code>[...args]</code></li>
</ul>
<p>触发当前实例上的事件。附加参数都会传给监听器回调。</p>
</li>
<li><p><strong>示例：</strong></p>
<p>只配合一个事件名使用 <code>$emit</code>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.component(<span class="string">'welcome-button'</span>, {</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;button v-on:click="$emit('welcome')"&gt;</span></span><br><span class="line"><span class="string">      Click me to be welcomed</span></span><br><span class="line"><span class="string">    &lt;/button&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"emit-example-simple"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">welcome-button</span> <span class="attr">v-on:welcome</span>=<span class="string">"sayHi"</span>&gt;</span><span class="tag">&lt;/<span class="name">welcome-button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  el: <span class="string">'#emit-example-simple'</span>,</span><br><span class="line">  methods: {</span><br><span class="line">    sayHi: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      alert(<span class="string">'Hi!'</span>)</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>

  <div id="emit-example-simple" class="demo"><button>
          Click me to be welcomed
        </button></div>
  <script>
    Vue.component('welcome-button', {
      template: `
        <button v-on:click="$emit('welcome')">
          Click me to be welcomed
        </button>
      `
    })
    new Vue({
      el: '#emit-example-simple',
      methods: {
        sayHi: function () {
          alert('Hi!')
        }
      }
    })
  </script>
  
<p>配合额外的参数使用 <code>$emit</code>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.component(<span class="string">'magic-eight-ball'</span>, {</span><br><span class="line">  data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> {</span><br><span class="line">      possibleAdvice: [<span class="string">'Yes'</span>, <span class="string">'No'</span>, <span class="string">'Maybe'</span>]</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  methods: {</span><br><span class="line">    giveAdvice: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">var</span> randomAdviceIndex = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="keyword">this</span>.possibleAdvice.length)</span><br><span class="line">      <span class="keyword">this</span>.$emit(<span class="string">'give-advice'</span>, <span class="keyword">this</span>.possibleAdvice[randomAdviceIndex])</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;button v-on:click="giveAdvice"&gt;</span></span><br><span class="line"><span class="string">      Click me for advice</span></span><br><span class="line"><span class="string">    &lt;/button&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"emit-example-argument"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">magic-eight-ball</span> <span class="attr">v-on:give-advice</span>=<span class="string">"showAdvice"</span>&gt;</span><span class="tag">&lt;/<span class="name">magic-eight-ball</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  el: <span class="string">'#emit-example-argument'</span>,</span><br><span class="line">  methods: {</span><br><span class="line">    showAdvice: <span class="function"><span class="keyword">function</span> (<span class="params">advice</span>) </span>{</span><br><span class="line">      alert(advice)</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>

  <div id="emit-example-argument" class="demo"><button>
          Click me for advice
        </button></div>
  <script>
    Vue.component('magic-eight-ball', {
      data: function () {
        return {
          possibleAdvice: ['Yes', 'No', 'Maybe']
        }
      },
      methods: {
        giveAdvice: function () {
          var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
          this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
        }
      },
      template: `
        <button v-on:click="giveAdvice">
          Click me for advice
        </button>
      `
    })
    new Vue({
      el: '#emit-example-argument',
      methods: {
        showAdvice: function (advice) {
          alert(advice)
        }
      }
    })
  </script>
  
</li>
</ul>
<h2 id="实例方法-生命周期"><a href="#实例方法-生命周期" class="headerlink" title="实例方法 / 生命周期" data-scroll="">实例方法 / 生命周期</a></h2><h3 id="vm-mount"><a href="#vm-mount" class="headerlink" title="vm.$mount( [elementOrSelector] )" data-scroll="">vm.$mount( [elementOrSelector] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Element | string} [elementOrSelector]</code></li>
<li><code>{boolean} [hydrating]</code></li>
</ul>
</li>
<li><p><strong>返回值</strong>：<code>vm</code> - 实例自身</p>
</li>
<li><p><strong>用法</strong>：</p>
<p>如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 <code>vm.$mount()</code> 手动地挂载一个未挂载的实例。</p>
<p>如果没有提供 <code>elementOrSelector</code> 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。</p>
<p>这个方法返回实例自身，因而可以链式调用其它实例方法。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> MyComponent = Vue.extend({</span><br><span class="line">  template: <span class="string">'&lt;div&gt;Hello!&lt;/div&gt;'</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建并挂载到 #app (会替换 #app)</span></span><br><span class="line"><span class="keyword">new</span> MyComponent().$mount(<span class="string">'#app'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 同上</span></span><br><span class="line"><span class="keyword">new</span> MyComponent({ <span class="attr">el</span>: <span class="string">'#app'</span> })</span><br><span class="line"></span><br><span class="line"><span class="comment">// 或者，在文档之外渲染并且随后挂载</span></span><br><span class="line"><span class="keyword">var</span> component = <span class="keyword">new</span> MyComponent().$mount()</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">'app'</span>).appendChild(component.$el)</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/instance.html#生命周期图示">生命周期图示</a></li>
<li><a href="../guide/ssr.html">服务端渲染</a></li>
</ul>
</li>
</ul>
<h3 id="vm-forceUpdate"><a href="#vm-forceUpdate" class="headerlink" title="vm.$forceUpdate()" data-scroll="">vm.$forceUpdate()</a></h3><ul>
<li><p><strong>示例</strong>：</p>
<p>迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。</p>
</li>
</ul>
<h3 id="vm-nextTick"><a href="#vm-nextTick" class="headerlink" title="vm.$nextTick( [callback] )" data-scroll="">vm.$nextTick( [callback] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 <code>Vue.nextTick</code> 一样，不同的是回调的 <code>this</code> 自动绑定到调用它的实例上。</p>
<blockquote>
<p>2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不是原生支持 Promise (IE：你们都看我干嘛)，你得自行 polyfill。</p>
</blockquote>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  methods: {</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    example: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="comment">// 修改数据</span></span><br><span class="line">      <span class="keyword">this</span>.message = <span class="string">'changed'</span></span><br><span class="line">      <span class="comment">// DOM 还没有更新</span></span><br><span class="line">      <span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">        <span class="comment">// DOM 现在更新了</span></span><br><span class="line">        <span class="comment">// `this` 绑定到当前实例</span></span><br><span class="line">        <span class="keyword">this</span>.doSomethingElse()</span><br><span class="line">      })</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="#Vue-nextTick">Vue.nextTick</a></p>
</li>
</ul>
<h3 id="vm-destroy"><a href="#vm-destroy" class="headerlink" title="vm.$destroy()" data-scroll="">vm.$destroy()</a></h3><ul>
<li><p><strong>用法</strong>：</p>
<p>完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。</p>
<p>触发 <code>beforeDestroy</code> 和 <code>destroyed</code> 的钩子。</p>
<p class="tip">在大多数场景中你不应该调用这个方法。最好使用 <code>v-if</code> 和 <code>v-for</code> 指令以数据驱动的方式控制子组件的生命周期。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/instance.html#生命周期图示">生命周期图示</a></p>
</li>
</ul>
<h2 id="指令"><a href="#指令" class="headerlink" title="指令" data-scroll="">指令</a></h2><h3 id="v-text"><a href="#v-text" class="headerlink" title="v-text" data-scroll="">v-text</a></h3><ul>
<li><p><strong>预期</strong>：<code>string</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>更新元素的 <code>textContent</code>。如果要更新部分的 <code>textContent</code> ，需要使用 <code>{{ Mustache }}</code> 插值。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 和下面的一样 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/syntax.html#插值">数据绑定语法 - 插值</a></p>
</li>
</ul>
<h3 id="v-html"><a href="#v-html" class="headerlink" title="v-html" data-scroll="">v-html</a></h3><ul>
<li><p><strong>预期</strong>：<code>string</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>更新元素的 <code>innerHTML</code> 。<strong>注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译</strong> 。如果试图使用 <code>v-html</code> 组合模板，可以重新考虑是否通过使用组件来替代。</p>
<p class="tip">在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="noopener">XSS 攻击</a>。只在可信内容上使用 <code>v-html</code>，<strong>永不</strong>用在用户提交的内容上。</p>

<p class="tip">在<a href="../guide/single-file-components.html">单文件组件</a>里，<code>scoped</code> 的样式不会应用在 <code>v-html</code> 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 <code>v-html</code> 的内容设置带作用域的 CSS，你可以替换为 <a href="https://vue-loader.vuejs.org/en/features/css-modules.html" target="_blank" rel="noopener">CSS Modules</a> 或用一个额外的全局 <code>&lt;style&gt;</code> 元素手动设置类似 BEM 的作用域策略。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"html"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/syntax.html#纯-HTML">数据绑定语法 - 插值</a></p>
</li>
</ul>
<h3 id="v-show"><a href="#v-show" class="headerlink" title="v-show" data-scroll="">v-show</a></h3><ul>
<li><p><strong>预期</strong>：<code>any</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>根据表达式之真假值，切换元素的 <code>display</code> CSS 属性。</p>
<p>当条件变化时该指令触发过渡效果。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/conditional.html#v-show">条件渲染 - v-show</a></p>
</li>
</ul>
<h3 id="v-if"><a href="#v-if" class="headerlink" title="v-if" data-scroll="">v-if</a></h3><ul>
<li><p><strong>预期</strong>：<code>any</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <code>&lt;template&gt;</code> ，将提出它的内容作为条件块。</p>
<p>当条件变化时该指令触发过渡效果。</p>
<p class="tip">当和 <code>v-if</code> 一起使用时，<code>v-for</code> 的优先级比 <code>v-if</code> 更高。详见<a href="../guide/list.html#v-for-with-v-if">列表渲染教程</a></p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/conditional.html">条件渲染 - v-if</a></p>
</li>
</ul>
<h3 id="v-else"><a href="#v-else" class="headerlink" title="v-else" data-scroll="">v-else</a></h3><ul>
<li><p><strong>不需要表达式</strong></p>
</li>
<li><p><strong>限制</strong>：前一兄弟元素必须有 <code>v-if</code> 或 <code>v-else-if</code>。</p>
</li>
<li><p><strong>用法</strong>：</p>
<p>为 <code>v-if</code> 或者 <code>v-else-if</code> 添加“else 块”。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"Math.random() &gt; 0.5"</span>&gt;</span></span><br><span class="line">  Now you see me</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else</span>&gt;</span></span><br><span class="line">  Now you don't</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/conditional.html#v-else">条件渲染 - v-else</a></p>
</li>
</ul>
<h3 id="v-else-if"><a href="#v-else-if" class="headerlink" title="v-else-if" data-scroll="">v-else-if</a></h3><blockquote>
<p>2.1.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>any</code></p>
</li>
<li><p><strong>限制</strong>：前一兄弟元素必须有 <code>v-if</code> 或 <code>v-else-if</code>。</p>
</li>
<li><p><strong>用法</strong>：</p>
<p>表示 <code>v-if</code> 的 “else if 块”。可以链式调用。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"type === 'A'"</span>&gt;</span></span><br><span class="line">  A</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">"type === 'B'"</span>&gt;</span></span><br><span class="line">  B</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">"type === 'C'"</span>&gt;</span></span><br><span class="line">  C</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else</span>&gt;</span></span><br><span class="line">  Not A/B/C</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/conditional.html#v-else-if">条件渲染 - v-else-if</a></p>
</li>
</ul>
<h3 id="v-for"><a href="#v-for" class="headerlink" title="v-for" data-scroll="">v-for</a></h3><ul>
<li><p><strong>预期</strong>：<code>Array | Object | number | string</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 <code>alias in expression</code> ，为当前遍历的元素提供别名：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span>&gt;</span></span><br><span class="line">  {{ item.text }}</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>另外也可以为数组索引指定别名 (或者用于对象的键)：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item, index) in items"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(val, key) in object"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(val, key, index) in object"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>v-for</code> 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 <code>key</code> 的特殊属性：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">  {{ item.text }}</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>v-for</code> 的详细用法可以通过以下链接查看教程详细说明。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/list.html">列表渲染</a></li>
<li><a href="../guide/list.html#key">key</a></li>
</ul>
</li>
</ul>
<h3 id="v-on"><a href="#v-on" class="headerlink" title="v-on" data-scroll="">v-on</a></h3><ul>
<li><p><strong>缩写</strong>：<code>@</code></p>
</li>
<li><p><strong>预期</strong>：<code>Function | Inline Statement | Object</code></p>
</li>
<li><p><strong>参数</strong>：<code>event</code></p>
</li>
<li><p><strong>修饰符</strong>：</p>
<ul>
<li><code>.stop</code> - 调用 <code>event.stopPropagation()</code>。</li>
<li><code>.prevent</code> - 调用 <code>event.preventDefault()</code>。</li>
<li><code>.capture</code> - 添加事件侦听器时使用 capture 模式。</li>
<li><code>.self</code> - 只当事件是从侦听器绑定的元素本身触发时才触发回调。</li>
<li><code>.{keyCode | keyAlias}</code> - 只当事件是从特定键触发时才触发回调。</li>
<li><code>.native</code> - 监听组件根元素的原生事件。</li>
<li><code>.once</code> - 只触发一次回调。</li>
<li><code>.left</code> - (2.2.0) 只当点击鼠标左键时触发。</li>
<li><code>.right</code> - (2.2.0) 只当点击鼠标右键时触发。</li>
<li><code>.middle</code> - (2.2.0) 只当点击鼠标中键时触发。</li>
<li><code>.passive</code> - (2.3.0) 以 <code>{ passive: true }</code> 模式添加侦听器</li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。</p>
<p>用在普通元素上时，只能监听<a href="https://developer.mozilla.org/zh-CN/docs/Web/Events" target="_blank" rel="noopener"><strong>原生 DOM 事件</strong></a>。用在自定义元素组件上时，也可以监听子组件触发的<strong>自定义事件</strong>。</p>
<p>在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 <code>$event</code> 属性：<code>v-on:click="handle('ok', $event)"</code>。</p>
<p>从 <code>2.4.0</code> 开始，<code>v-on</code> 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 方法处理器 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 内联语句 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"doThat('hello', $event)"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 缩写 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 停止冒泡 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 阻止默认行为 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.prevent</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 阻止默认行为，没有表达式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> @<span class="attr">submit.prevent</span>&gt;</span><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--  串联修饰符 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop.prevent</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 键修饰符，键别名 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> @<span class="attr">keyup.enter</span>=<span class="string">"onEnter"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 键修饰符，键代码 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> @<span class="attr">keyup.13</span>=<span class="string">"onEnter"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 点击回调只会触发一次 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click.once</span>=<span class="string">"doThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 对象语法 (2.4.0+) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on</span>=<span class="string">"{ mousedown: doThis, mouseup: doThat }"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">my-component</span> @<span class="attr">my-event</span>=<span class="string">"handleThis"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 内联语句 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">my-component</span> @<span class="attr">my-event</span>=<span class="string">"handleThis(123, $event)"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 组件中的原生事件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">my-component</span> @<span class="attr">click.native</span>=<span class="string">"onClick"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/events.html">事件处理器</a></li>
<li><a href="../guide/components.html#自定义事件">组件 - 自定义事件</a></li>
</ul>
</li>
</ul>
<h3 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind" data-scroll="">v-bind</a></h3><ul>
<li><p><strong>缩写</strong>：<code>:</code></p>
</li>
<li><p><strong>预期</strong>：<code>any (with argument) | Object (without argument)</code></p>
</li>
<li><p><strong>参数</strong>：<code>attrOrProp (optional)</code></p>
</li>
<li><p><strong>修饰符</strong>：</p>
<ul>
<li><code>.prop</code> - 被用于绑定 DOM 属性 (property)。(<a href="https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028" target="_blank" rel="noopener">差别在哪里？</a>)</li>
<li><code>.camel</code> - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)</li>
<li><code>.sync</code> (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 <code>v-on</code> 侦听器。</li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>动态地绑定一个或多个特性，或一个组件 prop 到表达式。</p>
<p>在绑定 <code>class</code> 或 <code>style</code> 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。</p>
<p>在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。</p>
<p>没有参数时，可以绑定到一个包含键值对的对象。注意此时 <code>class</code> 和 <code>style</code> 绑定不支持数组和对象。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 绑定一个属性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">"imageSrc"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 缩写 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">:src</span>=<span class="string">"imageSrc"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 内联字符串拼接 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">:src</span>=<span class="string">"'/path/to/images/' + fileName"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- class 绑定 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"{ red: isRed }"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"[classA, classB]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"[classA, { classB: isB, classC: isC }]"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- style 绑定 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"{ fontSize: size + 'px' }"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"[styleObjectA, styleObjectB]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 绑定一个有属性的对象 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind</span>=<span class="string">"{ id: someProp, 'other-attr': otherProp }"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 通过 prop 修饰符绑定 DOM 属性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:text-content.prop</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- prop 绑定。“prop”必须在 my-component 中声明。--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:prop</span>=<span class="string">"someThing"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 通过 $props 将父组件的 props 一起传给子组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">child-component</span> <span class="attr">v-bind</span>=<span class="string">"$props"</span>&gt;</span><span class="tag">&lt;/<span class="name">child-component</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- XLink --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">svg</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">:xlink:special</span>=<span class="string">"foo"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>.camel</code> 修饰符允许在使用 DOM 模板时将 <code>v-bind</code> 属性名称驼峰化，例如 SVG 的 <code>viewBox</code> 属性：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">svg</span> <span class="attr">:view-box.camel</span>=<span class="string">"viewBox"</span>&gt;</span><span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>在使用字符串模板或通过 <code>vue-loader</code>/<code>vueify</code> 编译时，无需使用 <code>.camel</code>。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/class-and-style.html">Class 与 Style 绑定</a></li>
<li><a href="../guide/components.html#Props">组件 - Props</a></li>
<li><a href="../guide/components.html#sync-修饰符">组件 - <code>.sync</code> 修饰符</a></li>
</ul>
</li>
</ul>
<h3 id="v-model"><a href="#v-model" class="headerlink" title="v-model" data-scroll="">v-model</a></h3><ul>
<li><p><strong>预期</strong>：随表单控件类型不同而不同。</p>
</li>
<li><p><strong>限制</strong>：</p>
<ul>
<li><code>&lt;input&gt;</code></li>
<li><code>&lt;select&gt;</code></li>
<li><code>&lt;textarea&gt;</code></li>
<li>components</li>
</ul>
</li>
<li><p><strong>修饰符</strong>：</p>
<ul>
<li><a href="../guide/forms.html#lazy"><code>.lazy</code></a> - 取代 <code>input</code> 监听 <code>change</code> 事件</li>
<li><a href="../guide/forms.html#number"><code>.number</code></a> - 输入字符串转为有效的数字</li>
<li><a href="../guide/forms.html#trim"><code>.trim</code></a> - 输入首尾空格过滤</li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/forms.html">表单控件绑定</a></li>
<li><a href="../guide/components.html#使用自定义事件的表单输入组件">组件 - 在输入组件上使用自定义事件</a></li>
</ul>
</li>
</ul>
<h3 id="v-pre" data-scroll-id="v-pre" tabindex="-1" style="outline: none;"><a href="#v-pre" class="headerlink" title="v-pre" data-scroll="">v-pre</a></h3><ul>
<li><p><strong>不需要表达式</strong></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-pre</span>&gt;</span>{{ this will not be compiled }}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h3 id="v-cloak"><a href="#v-cloak" class="headerlink" title="v-cloak" data-scroll="">v-cloak</a></h3><ul>
<li><p><strong>不需要表达式</strong></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 <code>[v-cloak] { display: none }</code> 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。</p>
</li>
<li><p><strong>示例</strong>：</p>
<figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-attr">[v-cloak]</span> {</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-cloak</span>&gt;</span></span><br><span class="line">  {{ message }}</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p></p><div> 不会显示，直到编译结束。</div><p></p>
</li>
</ul>
<h3 id="v-once"><a href="#v-once" class="headerlink" title="v-once" data-scroll="">v-once</a></h3><ul>
<li><p><strong>不需要表达式</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>只渲染元素和组件<strong>一次</strong>。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 单个元素 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-once</span>&gt;</span>This will never change: {{msg}}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 有子元素 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-once</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>comment<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">v-once</span> <span class="attr">:comment</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- `v-for` 指令--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"i in list"</span> <span class="attr">v-once</span>&gt;</span>{{i}}<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="../guide/syntax.html#插值">数据绑定语法- 插值</a></li>
<li><a href="../guide/components.html#对低开销的静态组件使用-v-once">组件 - 对低开销的静态组件使用 <code>v-once</code></a></li>
</ul>
</li>
</ul>
<h2 id="特殊特性"><a href="#特殊特性" class="headerlink" title="特殊特性" data-scroll="">特殊特性</a></h2><h3 id="key"><a href="#key" class="headerlink" title="key" data-scroll="">key</a></h3><ul>
<li><p><strong>预期</strong>：<code>number | string</code></p>
<p><code>key</code> 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。</p>
<p>有相同父元素的子元素必须有<strong>独特的 key</strong>。重复的 key 会造成渲染错误。</p>
<p>最常见的用例是结合 <code>v-for</code>：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：</p>
<ul>
<li>完整地触发组件的生命周期钩子</li>
<li>触发过渡</li>
</ul>
<p>例如：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">:key</span>=<span class="string">"text"</span>&gt;</span>{{ text }}<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>当 <code>text</code> 发生改变时，<code>&lt;span&gt;</code> 会随时被更新，因此会触发过渡。</p>
</li>
</ul>
<h3 id="ref"><a href="#ref" class="headerlink" title="ref" data-scroll="">ref</a></h3><ul>
<li><p><strong>预期</strong>：<code>string</code></p>
<p><code>ref</code> 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 <code>$refs</code> 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- `vm.$refs.p` will be the DOM node --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">ref</span>=<span class="string">"p"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- `vm.$refs.child` will be the child component instance --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">child-component</span> <span class="attr">ref</span>=<span class="string">"child"</span>&gt;</span><span class="tag">&lt;/<span class="name">child-component</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>当 <code>v-for</code> 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。</p>
<p>关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！<code>$refs</code> 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components-edge-cases.html#访问子组件实例或子元素">子组件 Refs</a></p>
</li>
</ul>
<h3 id="slot"><a href="#slot" class="headerlink" title="slot" data-scroll="">slot</a></h3><ul>
<li><p><strong>预期</strong>：<code>string</code></p>
<p>用于标记往哪个具名插槽中插入子组件内容。</p>
<p>详细用法，请参考下面指南部分的链接。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components.html#具名插槽">具名插槽</a></p>
</li>
</ul>
<h3 id="slot-scope"><a href="#slot-scope" class="headerlink" title="slot-scope" data-scroll="">slot-scope</a></h3><blockquote>
<p>2.5.0 新增</p>
</blockquote>
<ul>
<li><p><strong>预期</strong>：<code>function argument expression</code></p>
</li>
<li><p><strong>用法</strong>：</p>
<p>用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 <a href="#scope-replaced"><code>scope</code></a>。</p>
<p>此属性不支持动态绑定。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components.html#作用域插槽">Scoped Slots</a></p>
</li>
</ul>
<h3 id="scope-replaced"><a href="#scope-replaced" class="headerlink" title="scope replaced" data-scroll="">scope <sup>replaced</sup></a></h3><p>用于表示一个作为带作用域的插槽的 <code>&lt;template&gt;</code> 元素，它在 2.5.0+ 中被 <a href="#slot-scope"><code>slot-scope</code></a> 替代。</p>
<ul>
<li><p><strong>用法：</strong></p>
<p>除了 <code>scope</code> 只可以用于 <code>&lt;template&gt;</code> 元素，其它和 <a href="#slot-scope"><code>slot-scope</code></a> 都相同。</p>
</li>
</ul>
<h3 id="is"><a href="#is" class="headerlink" title="is" data-scroll="">is</a></h3><ul>
<li><p><strong>预期</strong>：<code>string | Object (组件的选项对象)</code></p>
<p>用于<a href="../guide/components.html#动态组件">动态组件</a>且基于 <a href="../guide/components.html#DOM-模板解析说明">DOM 内模板的限制</a>来工作。</p>
<p>示例：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 当 `currentView` 改变时，组件也跟着改变 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">component</span> <span class="attr">v-bind:is</span>=<span class="string">"currentView"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 这样做是有必要的，因为 `&lt;my-row&gt;` 放在一个 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- `&lt;table&gt;` 内可能无效且被放置到外面 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span> <span class="attr">is</span>=<span class="string">"my-row"</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>更多的使用细节，请移步至下面的链接。</p>
</li>
<li><p><strong>See also</strong>：</p>
<ul>
<li><a href="../guide/components.html#动态组件">动态组件</a></li>
<li><a href="../guide/components.html#DOM-模板解析说明">DOM 模板解析说明</a></li>
</ul>
</li>
</ul>
<h2 id="内置的组件"><a href="#内置的组件" class="headerlink" title="内置的组件" data-scroll="">内置的组件</a></h2><h3 id="component"><a href="#component" class="headerlink" title="component" data-scroll="">component</a></h3><ul>
<li><p><strong>Props</strong>：</p>
<ul>
<li><code>is</code> - string | ComponentDefinition | ComponentConstructor</li>
<li><code>inline-template</code> - boolean</li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>渲染一个“元组件”为动态组件。依 <code>is</code> 的值，来决定哪个组件被渲染。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"componentId"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 也能够渲染注册过的组件或 prop 传入的组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"$options.components.child"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components.html#动态组件">动态组件</a></p>
</li>
</ul>
<h3 id="transition"><a href="#transition" class="headerlink" title="transition" data-scroll="">transition</a></h3><ul>
<li><p><strong>Props</strong>：</p>
<ul>
<li><code>name</code> - string，用于自动生成 CSS 过渡类名。例如：<code>name: 'fade'</code> 将自动拓展为<code>.fade-enter</code>，<code>.fade-enter-active</code>等。默认类名为 <code>"v"</code></li>
<li><code>appear</code> - boolean，是否在初始渲染时使用过渡。默认为 <code>false</code>。</li>
<li><code>css</code> - boolean，是否使用 CSS 过渡类。默认为 <code>true</code>。如果设置为 <code>false</code>，将只通过组件事件触发注册的 JavaScript 钩子。</li>
<li><code>type</code> - string，指定过渡事件类型，侦听过渡何时结束。有效值为 <code>"transition"</code> 和 <code>"animation"</code>。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。</li>
<li><code>mode</code> - string，控制离开/进入的过渡时间序列。有效的模式有 <code>"out-in"</code> 和 <code>"in-out"</code>；默认同时生效。</li>
<li><code>enter-class</code> - string</li>
<li><code>leave-class</code> - string</li>
<li><code>appear-class</code> - string</li>
<li><code>enter-to-class</code> - string</li>
<li><code>leave-to-class</code> - string</li>
<li><code>appear-to-class</code> - string</li>
<li><code>enter-active-class</code> - string</li>
<li><code>leave-active-class</code> - string</li>
<li><code>appear-active-class</code> - string</li>
</ul>
</li>
<li><p><strong>事件</strong>：</p>
<ul>
<li><code>before-enter</code></li>
<li><code>before-leave</code></li>
<li><code>before-appear</code></li>
<li><code>enter</code></li>
<li><code>leave</code></li>
<li><code>appear</code></li>
<li><code>after-enter</code></li>
<li><code>after-leave</code></li>
<li><code>after-appear</code></li>
<li><code>enter-cancelled</code></li>
<li><code>leave-cancelled</code> (<code>v-show</code> only)</li>
<li><code>appear-cancelled</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p><code>&lt;transition&gt;</code> 元素作为单个元素/组件的过渡效果。<code>&lt;transition&gt;</code> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 简单元素 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"ok"</span>&gt;</span>toggled content<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 动态组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span> <span class="attr">mode</span>=<span class="string">"out-in"</span> <span class="attr">appear</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 事件钩子 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"transition-demo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span> @<span class="attr">after-enter</span>=<span class="string">"transitionComplete"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"ok"</span>&gt;</span>toggled content<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  ...</span><br><span class="line">  methods: {</span><br><span class="line">    transitionComplete: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>{</span><br><span class="line">      <span class="comment">// 传入 'el' 这个 DOM 元素作为参数。</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">  ...</span><br><span class="line">}).$mount(<span class="string">'#transition-demo'</span>)</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/transitions.html">过渡：进入，离开和列表</a></p>
</li>
</ul>
<h3 id="transition-group" data-scroll-id="transition-group" tabindex="-1" style="outline: none;"><a href="#transition-group" class="headerlink" title="transition-group" data-scroll="">transition-group</a></h3><ul>
<li><p><strong>Props</strong>：</p>
<ul>
<li><code>tag</code> - string，默认为 <code>span</code></li>
<li><code>move-class</code> - 覆盖移动过渡期间应用的 CSS 类。</li>
<li>除了 <code>mode</code>，其他特性和 <code>&lt;transition&gt;</code> 相同。</li>
</ul>
</li>
<li><p><strong>事件</strong>：</p>
<ul>
<li>事件和 <code>&lt;transition&gt;</code> 相同。</li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p><code>&lt;transition-group&gt;</code> 元素作为多个元素/组件的过渡效果。<code>&lt;transition-group&gt;</code> 渲染一个真实的 DOM 元素。默认渲染 <code>&lt;span&gt;</code>，可以通过 <code>tag</code> 属性配置哪个元素应该被渲染。</p>
<p>注意，每个 <code>&lt;transition-group&gt;</code> 的子节点必须有 <strong>独立的 key</strong> ，动画才能正常工作</p>
<p><code>&lt;transition-group&gt;</code> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类 (通过 <code>name</code> 属性或配置 <code>move-class</code> 属性自动生成)。如果 CSS <code>transform</code> 属性是“可过渡”属性，当应用移动类时，将会使用 <a href="https://aerotwist.com/blog/flip-your-animations/" target="_blank" rel="noopener">FLIP 技术</a> 使元素流畅地到达动画终点。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition-group</span> <span class="attr">tag</span>=<span class="string">"ul"</span> <span class="attr">name</span>=<span class="string">"slide"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">    {{ item.text }}</span><br><span class="line">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition-group</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p><strong>参考</strong>：<a href="../guide/transitions.html">过渡：进入，离开和列表</a></p>
</li>
</ul>
<h3 id="keep-alive" data-scroll-id="keep-alive" tabindex="-1" style="outline: none;"><a href="#keep-alive" class="headerlink" title="keep-alive" data-scroll="">keep-alive</a></h3><ul>
<li><p><strong>Props</strong>：</p>
<ul>
<li><code>include</code> - 字符串或正则表达式。只有名称匹配的组件会被缓存。</li>
<li><code>exclude</code> - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。</li>
<li><code>max</code> - 数字。最多可以缓存多少组件实例。</li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p><code>&lt;keep-alive&gt;</code> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <code>&lt;transition&gt;</code> 相似，<code>&lt;keep-alive&gt;</code> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。</p>
<p>当组件在 <code>&lt;keep-alive&gt;</code> 内被切换，它的 <code>activated</code> 和 <code>deactivated</code> 这两个生命周期钩子函数将会被对应执行。</p>
<blockquote>
<p>在 2.2.0 及其更高版本中，<code>activated</code> 和 <code>deactivated</code> 将会在 <code>&lt;keep-alive&gt;</code> 树内的所有嵌套组件中触发。</p>
</blockquote>
<p>主要用于保留组件状态或避免重新渲染。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 基本 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 多个条件判断的子组件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">comp-a</span> <span class="attr">v-if</span>=<span class="string">"a &gt; 1"</span>&gt;</span><span class="tag">&lt;/<span class="name">comp-a</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">comp-b</span> <span class="attr">v-else</span>&gt;</span><span class="tag">&lt;/<span class="name">comp-b</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 和 `&lt;transition&gt;` 一起使用 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>注意，<code>&lt;keep-alive&gt;</code> 是用在其一个直属的子组件被开关的情形。如果你在其中有 <code>v-for</code> 则不会工作。如果有上述的多个条件性的子元素，<code>&lt;keep-alive&gt;</code> 要求同时只有一个子元素被渲染。</p>
</li>
<li><p><strong><code>include</code> and <code>exclude</code></strong></p>
<blockquote>
<p>2.1.0 新增</p>
</blockquote>
<p><code>include</code> 和 <code>exclude</code> 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 逗号分隔字符串 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">include</span>=<span class="string">"a,b"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 正则表达式 (使用 `v-bind`) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">:include</span>=<span class="string">"/a|b/"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 数组 (使用 `v-bind`) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">:include</span>=<span class="string">"['a', 'b']"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>匹配首先检查组件自身的 <code>name</code> 选项，如果 <code>name</code> 选项不可用，则匹配它的局部注册名称 (父组件 <code>components</code> 选项的键值)。匿名组件不能被匹配。</p>
</li>
<li><p><strong><code>max</code></strong></p>
<blockquote>
<p>2.5.0 新增</p>
</blockquote>
<p>最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">:max</span>=<span class="string">"10"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<p class="tip"><code>&lt;keep-alive&gt;</code> 不会在函数式组件中正常工作，因为它们没有缓存实例。</p>

<ul>
<li><strong>参考</strong>：<a href="../guide/components.html#keep-alive">动态组件 - keep-alive</a></li>
</ul>
<h3 id="slot-1"><a href="#slot-1" class="headerlink" title="slot" data-scroll="">slot</a></h3><ul>
<li><p><strong>Props</strong>：</p>
<ul>
<li><code>name</code> - string，用于命名插槽。</li>
</ul>
</li>
<li><p><strong>Usage</strong>：</p>
<p><code>&lt;slot&gt;</code> 元素作为组件模板之中的内容分发插槽。<code>&lt;slot&gt;</code> 元素自身将被替换。</p>
<p>详细用法，请参考下面教程的链接。</p>
</li>
<li><p><strong>参考</strong>：<a href="../guide/components.html#使用插槽分发内容">使用插槽分发内容</a></p>
</li>
</ul>
<h2 id="VNode-接口" data-scroll-id="VNode-接口" tabindex="-1" style="outline: none;"><a href="#VNode-接口" class="headerlink" title="VNode 接口" data-scroll="">VNode 接口</a></h2><ul>
<li>请参考 <a href="https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js" target="_blank" rel="noopener">VNode class declaration</a>。</li>
</ul>
<h2 id="服务端渲染" data-scroll-id="服务端渲染" tabindex="-1" style="outline: none;"><a href="#服务端渲染" class="headerlink" title="服务端渲染" data-scroll="">服务端渲染</a></h2><ul>
<li>请参考 <a href="https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer" target="_blank" rel="noopener">vue-server-renderer package documentation</a>。</li>
</ul>

  
  
  <div class="footer">
      <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/api/index.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>
	
	
</div>		<!-- .content -->




<{/block}>
